<script setup lang="ts">
import { storeToRefs } from "pinia";
import useAttributeStore from "@/pinia/modules/product/attributeStore/attributeStore/attributeStore.ts";
import AttrTable from "@/views/product/attribute/components/attrTable/attrTable.vue";
import AttrControl from "@/views/product/attribute/components/attrControl/attrControl.vue";


const attributeStore = useAttributeStore();

const { screen } = storeToRefs(attributeStore);

</script>

<template>
  <div class="attribute">
    <tab-nav :screen="screen"></tab-nav>
    <transition name="slide-fade" mode="out-in">
      <el-card v-if="!screen">
        <attr-table></attr-table>
      </el-card>
      <el-card v-else>
        <attr-control></attr-control>
      </el-card>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.attribute {
  .el-card {
    margin-bottom: 10px;
  }
}
</style>
